<template>
    <up-loading-page
        :loading="show"
        :loading-text="loadingText"
        :loading-mode="loadingMode"
        :bg-color="bgColor"
        :image="image"
        :color="color"
        :font-size="fontSize"
        :icon-size="iconSize"
        :loading-color="loadingColor"
        :z-index="zIndex"
    >
    </up-loading-page>
</template>

<script setup>
/**
 * @description 全屏的加载动画loading 也可以通过z-index去控制成局部加载动画，一般用于当页面接口过多时或者请求过慢，页面又需要做大量渲染的处理
 * @author yinzhi
 * @date 2025-03-05
 * @property { Boolean }	show	显示控制  (默认 'false' )
 * @property { String }	loadingText	加载提示文字  (默认 '加载中...' )
 * @property { String }	loadingMode	加载图标模式  (默认 'spinner' ) circle \ spinner \ semicircle
 * @property { String }	bgColor		遮罩层背景颜色  (默认 'rgba(255, 255, 255, 0.98)' )
 * @property { String }	image		加载动画图片  (默认 '' )
 * @property { String }	color		加载文字字体颜色  (默认 '#122e81' )
 * @property { String | Number }	fontSize	加载文字字体大小  (默认 28 )
 * @property { String | Number }	iconSize	加载图标大小  (默认 60 )
 * @property { String }	loadingColor	加载图标颜色  (默认 '#122e81' )
 * @property { Number }	zIndex		层级  (默认 '1000' )
 * @example <hj-loading :show="show" />
 */
import props from './props.js'

const {
    show,
    loadingText,
    loadingMode,
    bgColor,
    image,
    color,
    fontSize,
    iconSize,
    loadingColor,
    zIndex
} = defineProps(props)
</script>
